import { useState, useEffect, useRef, useMemo } from 'react';
import { Table, MF, Form } from 'com';
import { Space, Button } from 'antd';
import { getTypes, getList, add, update } from 'api/dictionary';
import menuStore from 'store/menu';

export default () => {
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);
    /**
     * 字典列表
     */
    const [list, setList] = useState([]);
    /**
     * 类型
     */
    const [types, setTypes] = useState([{ label: '所有', value: 0 }]);
    /**
     * 搜索模型
     */
    const [searchModel, setSearchModel] = useState({ type: 0 });
    /**
     * 要操作的字典对象
     */
    const [dictionary, setDictionary] = useState({});
    /**
     * 添加MF引用
     */
    const addMF = useRef();
    /**
     * 列
     */
    const cols = [

        {
            title: 'Id',
            dataIndex: 'id',
            align: 'center'
        },
        {
            title: '名称',
            dataIndex: 'name',
            align: 'center'
        },
        {
            title: '类别',
            dataIndex: 'typeStr',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: 130,
            render: (text, row) => menuStore.auth('updateDictionary') && <Button size="small" type="link" onClick={() => {
                setDictionary({ ...row });
                addMF.current.show()
            }}>修改</Button>
        }
    ]
    /**
     * 搜索表单配置项
     */
    const searchOptions = useMemo(() => ({
        ...(menuStore.auth('dictionary') ? {
            type: {
                title: '类型',
                tag: 'select',
                style: { width: 130 },
                values: types,
            },
            button: {
                tag: 'button',
                text: '搜索',
                type: 'primary',
                loading,
                htmlType: 'submit'
            }
        } : {}),
        ...(menuStore.auth('addDictionary') ? {
            add: {
                tag: 'button',
                text: '添加字典',
                type: 'primary',
                click: () => {
                    setDictionary({});
                    addMF.current.show();
                }
            }
        } : {})
    }), [types, loading]);
    /**
     * 添加修改表单配置项
     */
    const options = useMemo(() => {
        const [a, ...rest] = types;
        return {
            name: {
                title: '字典名称',
                required: true,
                max: 20
            },
            type: {
                title: '类别',
                tag: 'select',
                required: true,
                values: rest
            }
        };
    }, [types]);

    useEffect(() => {
        (async () => {
            try {
                const types = await getTypes();
                setTypes(v => [...v, ...types]);
            } catch (error) { }
        })();
    }, []);

    useEffect(() => {
        const getDictionaryList = async () => {
            try {
                setLoading(true);
                const list = await getList(searchModel.type);
                setList(list);
            } catch (error) { }
            setLoading(false);
        };
        getDictionaryList();
    }, [searchModel]);

    /**
     * 提交
     * @param {*} values 
     */
    const confirm = async values => {
        addMF.current.start();
        try {
            await (dictionary.id ? update : add)({ ...values, id: dictionary.id });
            setSearchModel({ ...searchModel });
            addMF.current.hide();
        } catch (error) { }
        addMF.current.stop();
    }

    return <div>
        <h3>字典管理</h3>
        <hr />
        <Form onFinish={setSearchModel} options={searchOptions} values={searchModel} attrs={{ layout: 'inline' }} />
        <p></p>
        {menuStore.auth('dictionary') && <Table cols={cols} data={list} loading={loading} />}
        {menuStore.auth('addDictionary', 'updateDictionary') && <MF onFinish={confirm} ref={addMF} options={options} title={dictionary.id ? '修改字典' : '添加字典'} lw={80} values={dictionary} />}
    </div>
}